<template>
  <div class="wrap">
    <div class="cml-module-item">
      <p class="cml-module-item-t">{{ $t('cmlpanel.lightSensor_BrightnessRecognition') }}</p>
      <span class="cml-module-item-o">
        <a-switch size="small" :disabled="!isStart" :checked="isBrightness" @change="isBrightnessChange"/>
      </span>
    </div>
     <div class="cml-module-item">
      <p class="cml-module-item-t">{{ $t('cmlpanel.lightSensor_HueRecognition') }}</p>
      <span class="cml-module-item-o">
        <a-switch size="small" :disabled="!isStart" :checked="isHue" @change="isHueChange"/>
      </span>
    </div>
     <div class="cml-module-item">
      <p class="cml-module-item-t">{{ $t('cmlpanel.lightSensor_IntervalTime') }}</p>
      <span class="cml-module-item-o ">
         <a-select size="small"
        :disabled="!isStart"
        :value="intervalTime"
        :options="times"
        style="width: 70px"
        @change="intervalTimeChange">
      </a-select>
      </span>
    </div>
    <div class="cml-module-item">
      <p class="cml-module-item-t">{{ $t('cmlpanel.lightSensor_Color') }}</p>
      <span class="cml-module-item-o ">
          <div class="color-panel" :style="{background:getGbColor()}"></div>
      </span>
    </div>

  </div>
</template>
<script>
import * as anov from 'anov-core'
import { Switch, Select} from 'ant-design-vue'
export default {
  name: 'lightSensorMore',
  components: {
    ASwitch: Switch,
    ASelect:Select
  },
  model: {},
  props: {},
  data() {
    return {
      result: '',
      times: [{label:500,value:500},{label:1000,value:1000},{label:2000,value:2000}]
    }
  },
  computed: {
    ...anov.lightSensorServer.mapState(['isStart','isHue','isBrightness','intervalTime','lightColor']),
  },
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    getGbColor(){
      return 'rgb('+this.lightColor.join(',')+')'
    },
    isHueChange(v) {
      anov.lightSensorServer.isHue = v
    },
    isBrightnessChange(v){
      anov.lightSensorServer.isBrightness = v
    },
    intervalTimeChange(v){
       anov.lightSensorServer.intervalTime = v
    }
  }
}
</script>
<style lang="scss" scoped>
.wrap {
  padding: 10px;
}
.cml-module-item-o {
  height: 100%;
}
.color-panel {
  width: 70px;
  height: 80%;

  transition: background 0.2s;
}
</style>
